/* 通用组件 */

// 公用HEADER、SCHOOL、FOOTER
Vue.component('layout', {
  template:  `
    <div>
      <pup-le />
      <pup-ct />
      <pup-ri />
      <my-header :logo="logo" />
      <slot />
      <my-school v-if="school" />
      <my-form v-if="form" />
      <slot name="extra" />
      <my-footer />
    </div>
  `,
  props: {
    school: {
      type: Boolean,
      default: true,
    },
    form: {
      type: Boolean,
      default: false,
    },
    logo: {
      type: Number,
      default: 0,
    }
  },
  components: {
    'my-header': httpVueLoader('./components/header.vue'),
    'my-footer': httpVueLoader('./components/footer.vue'),
    'my-school': httpVueLoader('./components/school.vue'),
    'my-form': httpVueLoader('./components/form.vue'),
    'pup-le': httpVueLoader('./components/pup-le.vue'),
    'pup-ri': httpVueLoader('./components/pup-ri.vue'),
    'pup-ct': httpVueLoader('./components/pup-ct.vue')
  }
})

// 通用主副标题布局
Vue.component('common-title', {
  template: `
    <div 
      class="common-title-wrapper" 
      :class="{ 'white-theme': theme === 'white', 'black-theme': theme !== 'white' }"
      :style="{
        paddingTop: top,
        paddingBottom: bottom,
      }"
    >
      <div class="main-title-large">{{title}}</div>
      <div class="main-title-small"><slot /></div>
    </div>
  `,
  props: {
    title: {
      type: String,
    },
    theme: {
      type: String,
      default: 'white'
    },
    top: {
      type: String,
      default: '70px'
    },
    bottom: {
      type: String,
      default: '70px'
    }
  },
})